<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="../css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="../css/ui-box.css">
        <link rel="stylesheet" href="../css/ui-base.css">
        <link rel="stylesheet" href="../css/ui-color.css">
        <link rel="stylesheet" href="../css/appcan.icon.css">
        <link rel="stylesheet" href="../css/appcan.control.css">
        <link rel="stylesheet" href="../css/my/style.css">
        <link rel="stylesheet" href="../js/swiper/css/swiper.min.css">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #topNav {
                width: 100%;
                overflow: hidden;
                font: 1em hiragino sans gb, microsoft yahei, simsun;
                border-bottom: 1px solid #f8f8f8;
            }
            #topNav .swiper-slide {
                padding: 0 5px;
                letter-spacing: 2px;
                width: 3em;
                text-align: center;
            }
            #topNav .swiper-slide span {

                transition: all .3s ease;
                display: block;
            }
            #topNav .active span {
                transform: scale(1.1);
                color: #FF2D2D;
            }
            img {
                width: 100%;
                line-height: 0;
            }
        </style>
    </head>
    <body class="um-vp " ontouchstart>
        <div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
            <!--header开始-->
            <div id="header" class="uh bc-text-head ub bc-head">
                <div class="nav-btn" id="nav-left">
                    <div class="fa fa-angle-left ulev2"></div>
                </div>
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">Swiper Nav</h1>
                <div class="nav-btn nav-bt" id="nav-right"></div>
            </div>
            <!--header结束--><!--content开始-->
            <div id="content" class="ub-fh cnt-ofh cnt-whf">
                <div id="topNav" class="swiper-container bg-white">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide active">
                            <span>推荐</span>
                        </div>
                        <div class="swiper-slide">
                            <span>热点</span>
                        </div>
                        <div class="swiper-slide">
                            <span>深圳</span>
                        </div>
                        <div class="swiper-slide">
                            <span>视频</span>
                        </div>
                        <div class="swiper-slide">
                            <span>社会</span>
                        </div>
                        <div class="swiper-slide">
                            <span>娱乐</span>
                        </div>
                        <div class="swiper-slide">
                            <span>科技</span>
                        </div>
                        <div class="swiper-slide">
                            <span>问答</span>
                        </div>
                        <div class="swiper-slide">
                            <span>汽车</span>
                        </div>
                        <div class="swiper-slide">
                            <span>财经</span>
                        </div>
                        <div class="swiper-slide">
                            <span>军事</span>
                        </div>
                        <div class="swiper-slide">
                            <span>体育</span>
                        </div>
                        <div class="swiper-slide">
                            <span>段子</span>
                        </div>
                        <div class="swiper-slide">
                            <span>美女</span>
                        </div>
                        <div class="swiper-slide">
                            <span>国际</span>
                        </div>
                        <div class="swiper-slide">
                            <span>趣图</span>
                        </div>
                        <div class="swiper-slide">
                            <span>健康</span>
                        </div>
                        <div class="swiper-slide">
                            <span>特产</span>
                        </div>
                        <div class="swiper-slide">
                            <span>房产</span>
                        </div>
                    </div>
                </div>
            </div>
            <!--content结束-->
        </div>
        <script src="../js/appcan.js"></script>
        <script src="../js/appcan.control.js"></script>
        <script src="../js/appcan.listview.js"></script>
        <script src="../js/appcan.optionList.js"></script>
        <script src="../js/appcan.slider.js"></script>
        <script src="../js/swiper/js/swiper.min.js"></script>
        <script src="../js/my/smb.grid.js"></script>
        <script src="../js/my/smb.window.js"></script>
        <script src="../js/my/smb.localStorage.js"></script>
        <script src="../js/my/smb.utils.js"></script>
        <script src="../js/my/smb.log.js"></script>
    </body>
    <script>
        var myScroll = undefined;
        var pageName = "TestSwiperNav";
        appcan.ready(function() {
            pageName = smb_GetLatestOpenedWindow() || pageName;
            appcan.button("#nav-left", "ani-act", function() {
                smb_CloseWindow();
            });
            var mySwiper = new Swiper('#topNav', {
                freeMode : true,
                freeModeMomentumRatio : 0.5,
                slidesPerView : 'auto',
                slideToClickedSlide : true
            });

            swiperWidth = mySwiper.width;
            maxTranslate = mySwiper.maxTranslate();
            maxWidth = -maxTranslate + swiperWidth / 2;

            $(".swiper-container").on('touchstart', function(e) {
                e.preventDefault();
            })
            mySwiper.on('tap', function(e) {
                //console.log(mySwiper)

                e.preventDefault();
                slide = mySwiper.slides[mySwiper.clickedIndex];
                slideLeft = slide.offsetLeft;
                slideWidth = slide.clientWidth;
                slideCenter = slideLeft + slideWidth / 2;
                // 被点击slide的中心点
                mySwiper.setTranslate(300);
                if (slideCenter < swiperWidth / 2) {
                    mySwiper.setTranslate(0);
                } else if (slideCenter > maxWidth) {
                    mySwiper.setTranslate(maxTranslate);
                } else {
                    nowTlanslate = slideCenter - swiperWidth / 2
                    mySwiper.setTranslate(-nowTlanslate);
                }
                $("#topNav .active").removeClass('active');
                $("#topNav .swiper-slide").eq(mySwiper.clickedIndex).addClass('active');
            })
        });
    </script>
</html>